<script lang="ts" setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type { DefaultDetailData, Related } from '@/TypingMore/VideoTyping'

const props = defineProps<{
    videoData: DefaultDetailData
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const goToDetail = (bvid: string, r: Related) => {
    let obj = {
        bvid: r.bvid,
        aid: r.aid,
        length: r.duration,
        title: r.title,
        play: r.stat.danmaku,
        video_review: r.stat.view,
        pic: r.pic
    }
    browseRecords(obj)
    router.replace(`/video/${bvid}`)   
}

</script>


<template>
    <div v-if="!videoData?.data?.View.redirect_url">
        <div class=" flex justify-between px-1 py-2">
            <div class=" text-base">相关推荐</div>
            <!-- <div class=" text-neutral-400"><span class="iconfont icon-jinrujiantouxiao ml-2"></span></div> -->
        </div>
        <div class="flex flex-wrap">
            <div v-for="r in videoData?.data?.Related" :key="r.aid" class="w-1/2 px-1 py-2" @click="goToDetail(r.bvid, r)">
                <div class="relative inline-block ">
                    <img :src="r.pic + '@480w_270h_1c'" alt="" class=" rounded-sm">
                    <div style="background: linear-gradient(0deg,rgba(0,0,0,.85),transparent); width: 100%;"
                        class=" flex justify-between absolute bottom-0 left-0 text-white py-1 px-1.5 text-xs">
                        <div class=" flex items-center "><span class="iconfont icon-bofangshu mr-1.5"></span><span>{{
                                timeAbbreviation(r.stat.view)
                        }}</span></div>
                        <div class=" flex items-center "><span class="iconfont icon-danmushu  mr-1.5"></span><span>{{
                                timeAbbreviation(r.stat.danmaku)
                        }}</span></div>
                    </div>

                </div>
                <div>
                    <p class="overflow-hidden text-ellipsis text-xs mt-1.5 text-black "
                        style="-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; width: 100%;">
                        {{ r.title }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>